<template>
  <view>
    <image @click="isShow = true" src="@/static/menu.png" class="menu" />
    <van-popup
      position="right"
      v-model="isShow"
      :close-on-click-overlay="false"
      :style="{ height: '100%' }"
      @click-overlay="isShow = false"
    >
      <van-list>
        <view class="menuList">
          <van-cell title="菜单" class="munuTitle" />
          <van-cell title="切换语言">
            <view class="isLanguages">
              <!-- <span>{{ '简体中文' }}</span>
              <image
                src="@/static/bottom-arrow.png"
                class="bottom-arrow"
              ></image> -->
              <van-dropdown-menu>
                <van-dropdown-item v-model="value1" :options="option1" />
              </van-dropdown-menu>
            </view>
          </van-cell>
          <navigator url="/pages/my/index"
            ><van-cell title="我的账号"
          /></navigator>
          <navigator url="/pages/signup/index"
            ><van-cell title="注册新账户"></van-cell
          ></navigator>

          <van-cell title="联系我们" />
          <van-cell title="关于我们" />
        </view>
      </van-list>
    </van-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      value1: 0,
      option1: [
        { text: '简体中文', value: 0 },
        { text: '繁体中文', value: 1 },
        { text: '英语', value: 2 }
      ]
    }
  },
  onLoad() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.menu {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  width: 60rpx;
  height: 60rpx;
}
.menuList {
  width: 500rpx;
  font-weight: 700;
  ::v-deep .van-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 30rpx;
    height: 88rpx;
    .van-cell__value {
      color: #333;
    }
  }
  .munuTitle {
    font-size: 50rpx;
  }
  .isLanguages {
    .bottom-arrow {
      width: 20rpx;
      height: 20rpx;
    }
    // span {
    //   font-weight: normal;
    //   margin: 0 10rpx;
    // }
    ::v-deep .van-dropdown-menu {
      display: flex;
      justify-content: end;
      padding-right: 10rpx;
      .van-dropdown-menu__title {
        font-weight: normal;
        font-size: 30rpx !important;
      }
      .van-dropdown-menu__bar {
        box-shadow: 0 2px 12px #fff;
      }
      .van-dropdown-menu__title::after {
        border-color: transparent transparent #000 #000;
      }
    }
  }
}
</style>
